<template lang="pug">
  .menu-f.clearfix
    ul.icon-list.fl(v-if='getLeftMenu')
      li.icon-item(
        v-for='(l, index) in getLeftMenu',
        :key='index',
        @click='handleMenu(l)')
        .icon-inner
          img(:src='"/static/images/icon/" + l.normal + ".png"')

    ul.icon-list.fr(v-if='getRightMenu')
      li.icon-item(
        v-for='(r, rightIndex) in getRightMenu',
        :key='rightIndex',
        @click='handleMenu(r)')
        .icon-inner
          img(:src='"/static/images/icon/" + r.normal + ".png"')

</template>
<script>
import { mapGetters } from 'vuex'
import {
  handleSystemMenu,
  handleCustomMenu
} from '@/utils/menu'
import {
  isPlainObject
} from '@/utils'
import * as krpano from '@/utils/krpano'

export default {
  data() {
    return {
      curIndex: -1,
      rightIndex: 5
    }
  },
  methods: {
    filterBtMenuIcon() {
      const btMenu = this.getBtMenu
      let left = []
      let right = []
      if (btMenu.length > 0) {
        btMenu.forEach(item => {
          switch (item.type_id) {
            case 2:
              right.push({ type_id: '2', name: 'intro', normal: 'intro', active: 'intro', item })
              break;
            case 12:
              right.push({ type_id: '12', name: 'goods', normal: 'goods', active: 'goods', item })
              break;
            case 1:
              left.push({ type_id: '1', name: 'home', normal: 'home', active: 'home', item })
              break;
            case 3:
              left.push({ type_id: '3', name: 'addr', normal: 'addr', active: 'addr', item })
              break;
            case 4:
              left.push({ type_id: '4', name: 'tel', normal: 'tel', active: 'tel', item })
              break;
            case 8:
              left.push({ type_id: '8', name: 'voice', normal: 'voice', active: 'voice', item })
              break;
            case 17:
              left.push({ type_id: '17', name: 'slider', normal: 'slider', active: 'slider', item })
              break;
            case 18:
              left.push({ type_id: '18', name: 'video', normal: 'video', active: 'video', item })
              break;
          }
        })

        // if ($globalconfig.HomeFlag) {
          //   right.push({ type_id: '', name: 'home', normal: 'home', active: 'home_active', item: null })
        // }
      }
      left.unshift(
        { type_id: 'scene', name: 'scene', normal: 'scene', active: 'scene_active', item: null }
      )

      if (krpano.visibleShare()) {
        right.push({ type_id: 'share', name: 'share', normal: 'share', active: 'share', item: null })
      }

      if (krpano.visibleSay()) {
        right.push({ type_id: 'say', name: 'say', normal: 'say', active: 'say', item: null })
      }

      if (krpano.visibleFabulous()) {
        right.push({ type_id: 'praise', name: 'praise', normal: 'praise', active: 'praise', item: null })
      }
      return {
        left,
        right
      }
    },
    handleMenu(obj) {
      if (isPlainObject(obj.item)) {
        handleCustomMenu(obj.item)
      } else {
        handleSystemMenu(obj)
      }
    },
    goHome() {
      if (window.navigator.userAgent.toLowerCase().indexOf('micromessenger') == -1) {
        window.location.href = $globalconfig.URLS.HOME
      }else {
        wx.miniProgram.getEnv(res => {
          if (res.miniprogram) {
            wx.miniProgram.switchTab({url: '/pages/index/index'})
          } else {
            window.location.href = $globalconfig.URLS.HOME
          }
        })
      }
    }
  },
  computed: {
    ...mapGetters([
      'getBtMenu',
      'getTopMenu',
      'navGuideData',
      'panoInfo'
    ]),
    getLeftMenu() {
      const { left } = this.filterBtMenuIcon()
      return left
    },
    getRightMenu() {
      const { right } = this.filterBtMenuIcon()
      return right
    }
  }
}
</script>

<style lang="stylus" scoped>
.theme-pc-f
  .menu-f
    padding: 10px
    .icon-list
      .icon-item
        $size = 34px
        padding: 0 5px
        width: $size
        height: $size
        line-height: $size
.theme-app-f
  .menu-f
    padding: 10px 5px
    .icon-list
      .icon-item
        $size = 30px
        padding: 0 2px
        width: $size
        height: $size
        line-height: $size

.menu-f
  .icon-list
    .icon-item
      display: inline-block

      .icon-inner
        border-radius: 50%
        text-align: center
        img
          width: 100%
</style>

